<template>
  <div class="question-table">
    <!-- 数据列表 -->
    <el-table
      :key="tableKey"
      :data="dataList"
      v-loading="value"
      element-loading-text="给我一点时间"
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column align="left" label="试题编号" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.number }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="学科" width="70">
        <template slot-scope="scope">
          <span>{{ scope.row.subject }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="目录">
        <template slot-scope="scope">
          <span>{{ scope.row.catalog }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="题型">
        <template slot-scope="scope">
          <span>{{scope.row.questionType | toQuestionType  }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="题干" width="160">
        <template slot-scope="scope">
          <span v-html="scope.row.question"></span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="录入时间" width="160">
        <template slot-scope="scope">
          <span>{{
            scope.row.addDate | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="难度">
        <template slot-scope="scope">
          <span>{{scope.row.difficulty | toDifficulty}}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="录入人">
        <template slot-scope="scope">
          <span>{{ scope.row.creator }}</span>
        </template>
      </el-table-column>
      <!-- 操作按钮 -->
      <el-table-column
        align="left"
        label="操作"
        width="200"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <!-- 查看题目视图 -->
          <el-button
            type="primary"
            icon="el-icon-view"
            plain
            circle
            @click="handleChangeQuestion(scope.row)"
          ></el-button>
          <!-- 编辑 -->
          <el-button
            type="success"
            icon="el-icon-edit"
            plain
            circle
            @click="
              $router.push({
                path: '/questions/new',
                query: { id: scope.row.id },
              })
            "
          ></el-button>
          <!-- 删除 -->
          <el-button
            type="danger"
            icon="el-icon-delete"
            plain
            circle
            @click="removeQuestion(scope.row)"
          ></el-button>
          <!-- 加入精选 -->
          <el-button
            type="warning"
            icon="el-icon-check"
            plain
            circle
            @click="addChoice(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 试题预览对话框 -->
    <questions-preview ref="questionPreviewRef"
    :questionList="questionList"
    :radioCurrent="radioCurrent"
    :checkboxCurrent="checkboxCurrent"
    ></questions-preview>
  </div>
</template>

<script>
import QuestionsPreview from '../../components/questions-preview'
import { detail } from '@/api/hmmm/questions'

export default {
  name: 'QuestionTable',
  components: {
    QuestionsPreview
  },
  props: {
    dataList: {
      type: [Array, Object],
      required: true
    },
    value: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      tableKey: 0,
      questionList: [],
      radioCurrent: undefined,
      checkboxCurrent: undefined
    }
  },
  computed: {},
  created () {},
  methods: {
    // 点击 "删除" 按钮进行移除该项题目
    removeQuestion (row) {
      // 弹出询问框咨询客户
      this.$confirm('此操作将永久删除该题目,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then((action) => {
          // 点击 确定
          // 给父组件发消息 进行删除该题目
          this.$emit('remove-question', row.id)
        })
        .catch(() => {
          // 点击取消
        })
    },
    // 点击 "加入精选" 按钮进行加入精选题库
    addChoice (row) {
      // 弹出询问框咨询客户
      this.$confirm('此操作将该题目加入精选,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
        .then((action) => {
          // 点击 确定
          // 给父组件发消息 进行删除该题目
          this.$emit('add-choice', row.id)
        })
        .catch(() => {
          // 点击取消
        })
    },
    // 显示题目预览弹层 并 获取当前题目数据
    async handleChangeQuestion (row) {
      // 显示题目预览弹层
      this.$refs.questionPreviewRef.dialogFormV()
      // 获取当前题目数据
      const { data: res } = await detail({ id: row.id })
      this.questionList = res
      this.radioCurrent = res.options.find(t => t.isRight)
      this.checkboxCurrent = res.options.filter(t => t.isRight)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
